<!-- src/components/UrlUploadDialog.vue -->
<template>
    <el-dialog :model-value="visible" title="从URL上传" width="600px" @close="handleClose"
        :close-on-click-modal="!isLoading" :close-on-press-escape="!isLoading">
        <el-form :model="form" :rules="rules" ref="formRef" label-position="top">
            <el-form-item label="来源URL" prop="sourceUrl">
                <el-input v-model="form.sourceUrl" placeholder="请输入一个公开可访问的文件URL" clearable
                    @change="autofillDestinationKey" />
                <div class="form-item-description">
                    请输入一个以 http:// 或 https:// 开头的、可直接下载的公开文件链接。
                </div>
            </el-form-item>

            <el-form-item label="保存到 (S3 Key)" prop="destinationKey">
                <el-input v-model="form.destinationKey" placeholder="例如: movies/my-favorite-movie.mp4">
                    <template #prepend>{{ bucketName }}/{{ currentPath }}</template>
                </el-input>
                <div class="form-item-description">
                    这是文件在当前存储桶内的完整路径和文件名。请确保文件名包含正确的扩展名。
                </div>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose" :disabled="isLoading">取消</el-button>
                <el-button type="primary" @click="startTransfer" :loading="isLoading">
                    {{ isLoading ? '正在创建任务...' : '开始传输' }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import apiClient from '@/api';
import { useTransportStore, useSettingsStore } from '@/stores'; // 导入 transportStore

const props = defineProps({
    visible: Boolean,
    bucketName: String,
    currentPath: String,
});
const emit = defineEmits(['close']);

const transportStore = useTransportStore(); // 实例化 store
const settingsStore = useSettingsStore(); // 实例化 store

const formRef = ref(null);
const isLoading = ref(false);

const form = reactive({
    sourceUrl: '',
    destinationKey: '',
});

// 验证规则
const rules = reactive({
    sourceUrl: [
        { required: true, message: '来源URL不能为空', trigger: 'blur' },
        // 【核心修正】自定义验证器，允许http, https, rtsp协议
        {
            validator: (rule, value, callback) => {
                if (value.toLowerCase().startsWith('http://') ||
                    value.toLowerCase().startsWith('https://') ||
                    value.toLowerCase().startsWith('rtsp://')) {
                    callback();
                } else {
                    callback(new Error("请输入以 http://, https://, 或 rtsp:// 开头的有效URL"));
                }
            }, trigger: ['blur', 'change']
        }
    ],
    destinationKey: [
        { required: true, message: '保存路径不能为空', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value.startsWith('/')) {
                    callback(new Error("路径不能以'/'开头"));
                } else if (value.endsWith('/')) {
                    callback(new Error("路径不能以'/'结尾，必须是完整的文件名"));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ],
});

// 【智能填充】当用户输入URL后，自动提取文件名填充到“保存到”输入框
// 在 UrlUploadDialog.vue 的 <script setup> 中

const autofillDestinationKey = (url) => {
    // 只在“保存到”输入框为空时，才执行自动填充
    if (url && !form.destinationKey) {
        try {
            // 为了能统一处理http和rtsp，我们先对URL进行标准化
            const parsableUrl = url.toLowerCase().startsWith('rtsp://')
                ? 'http://' + url.substring(7)
                : url;

            const urlObject = new URL(parsableUrl);
            const pathParts = urlObject.pathname.split('/');
            let filename = pathParts.pop() || ''; // 获取路径的最后一部分

            // 解码，以处理像您例子中的 %E8%81%94... 这样的编码字符
            filename = decodeURIComponent(filename);

            // 如果成功提取到了文件名，才进行填充
            if (filename) {
                if (url.toLowerCase().startsWith('rtsp://') && !filename.includes('.')) {
                    form.destinationKey = `${filename}.mp4`;
                } else {
                    // 对于所有其他情况（包括HTTP链接，或已有后缀的RTSP链接），直接使用提取出的文件名
                    form.destinationKey = filename;
                }
            }

        } catch (e) {
            console.warn("无法从URL中自动解析文件名:", e);
            // URL格式不正确时，静默失败，不影响用户手动输入
        }
    }
};

// 重置表单的辅助函数
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    }
};

const handleClose = () => {
    if (!isLoading.value) {
        emit('close');
    }
};

// 监听 visible 属性的变化，当弹窗关闭时重置表单
watch(() => props.visible, (newValue) => {
    if (!newValue) {
        resetForm();
    }
});


const startTransfer = async () => {
    if (!formRef.value) return;
    await formRef.value.validate(async (valid) => {
        if (valid) {
            isLoading.value = true;
            try {
                const fullDestinationKey = `${props.currentPath}${form.destinationKey}`;

                // 调用我们新的后端API
                const response = await apiClient.post(
                    `/api/v1/buckets/${props.bucketName}/upload-from-url`,
                    {
                        source_url: form.sourceUrl,
                        destination_key: fullDestinationKey,
                        chunk_size_mb: settingsStore.urlUploadChunkSize
                    }
                );

                ElMessage.success(response.data.message || '后台传输任务已创建！');

                // =================================================================
                // == 【核心修正】将后端返回的整个 task_info 对象传递给 store      ==
                // =================================================================
                if (response.data && response.data.task_info) {
                    transportStore.addUrlTransferTask(response.data.task_info);
                }

                emit('close');

            } catch (error) {
                console.error("创建URL传输任务失败:", error);
                ElMessage.error(error.response?.data?.error || '创建任务失败，请检查URL或网络');
            } finally {
                isLoading.value = false;
            }
        }
    });
};
</script>

<style scoped>
.form-item-description {
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
    margin-top: 4px;
}
</style>